.box{
	width: 800px;
	margin: 0 auto;
}

.editor{
	overflow: hidden;
	width: 100%;
	border: 1px solid #ddd;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
}

.editor-toolbar{
	overflow: hidden;
	border-bottom: 1px solid #ddd;
	background-color: #f5f5f5;
}

.editor-toolbar .item{
	float: left;
	height: 40px;
	width: 40px;
	line-height: 40px;
	cursor: pointer;
	text-align: center;
	transition:background-color 0.3s;
	-webkit-transition:background-color 0.3s;
	-moz-transition:background-color 0.3s;
}
.editor-toolbar .item:hover{background-color: #ddd;}
.editor-toolbar .item:active{background-color: #ccc}

.editor-textarea{
	border: none;
	resize: none;
	outline: none;
	padding: 10px 10px;
	background-color: #f5f5f5;
	font-size: 16px;
	color: #333;
}

.editor-preview{
	padding: 30px;
	background-color: white;
}
.editor-textarea,.editor-preview{
	overflow-y: scroll;
	width: 100%;
	font-family: '微软雅黑';
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
}
.editor-textarea:fullscreen,.editor-preview:fullscreen{height: 100% !important;}
.editor-textarea:full-screen,.editor-preview:full-screen{height: 100% !important;}
.editor-textarea:-webkit-full-screen,.editor-preview:-webkit-full-screen{height: 100% !important;}
.editor-textarea:-moz-full-screen,.editor-preview:-moz-full-screen{height: 100% !important;}
.editor-textarea:-ms-fullscreen,.editor-preview:-ms-fullscreen{height: 100% !important;}